<template>
    <div class="big">
                    
        <div class="box">
            系统登录
            <el-form size="medium"  ref="btn" :model="loginInfo" :rules="checkInfo">
                <el-form-item prop="account">
                    <el-input type="text" v-model="loginInfo.account" class="acc" @keyup.enter.native="goLogin">
                        <i slot="prefix" class="iconfont icon-yonghufill"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :type="isShow?'text':'password'" v-model="loginInfo.password" class="pwd" @keyup.enter.native="goLogin">
                        <i slot="prefix" class="iconfont icon-mima"></i>
                        <i slot="suffix" :class="['iconfont','yanjing',isShow?'zhengyan':'biyan']" @click="isShow=!isShow"></i>
                    </el-input>
                </el-form-item>
                <el-form-item>
                        <el-button type="primary" size="medium" class="loginbtn" @click="goLogin">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                isShow:false,
                 loginInfo: {
                    account: "", //账号
                    password: "", //密码
                },
                checkInfo:{
                    account:[
                        {required:true,message:"请输入账号！！",trigger:"blur"},
                        {min:3,max:12,message:"请输入3-12位的账号！！",trigger:"blur"}
                    ],
                    password:[
                        {required:true,message:"请输入密码！！",trigger:"blur"},
                        {min:3,max:6,message:"请输入3-6位的密码！！",trigger:"blur"}
                    ]
                },
            }
        },
        methods:{
                    goLogin(){
                        this.$refs.btn.validate((b)=>{
                            
                            if(b){
                                const loading = this.$loading({
                                lock: true,
                                text: "Loading",
                                spinner: "el-icon-loading",
                                background: "rgba(0, 0, 0, 0.7)",
                                });
                                setTimeout(() => {
                                loading.close();
                                this.$router.push("/home");
                                }, 2000);
                                // this.$router.push("/home")
                                 checkLogin(this.loginInfo).then(res => {
                                    console.log(res, '333333333333')
                                    if(res.code === 0) { // 成功了
                                    // console.log(token);
                                    local.set('token',res.token)
                                    local.set('role',res.role)
                                    createdynamicRoutes()
                                    this.$router.replace("/home") ;//没有将当前的跳转记录添加到历史中，不能使用回退历史的按钮
                                    // this.$router.push("/layout"); //会将当前的跳转记录添加到历史中可以使用历史回退按钮
                                    } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                    }

                                    
                                })

                                

                            }
                        })

                        // request.post('/users/checkLogin',{
                        //     account: 'admin',
                        //     password: '666'
                        // }).then(res=>{
                        //     console.log(res,'111');
                        // })
                    
                    },

                }
    }
</script>

<style lang="less" scoped>
.big{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #2d3a4b;
    color: white;
}
.box{
    width: 300px;
    height: 300px;
    text-align: center;
    font-size: 26px;
}
.acc{
    margin-top: 20px;
}
.loginbtn{
    width: 100%;
}

</style>